<!-- 联系信息组件 -->
<?php
// 假设使用 htmlspecialchars 替代未定义的 e 函数
if (!function_exists('e')) {
    function e($string) {
        return htmlspecialchars($string, ENT_QUOTES, 'UTF-8');
    }
}
?>
<section id="<?= e($data['config']['section_id']) ?>" class="py-16 bg-gray-50">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <!-- 标题区域 -->
        <?php if ($data['config']['show_title']): ?>
            <div class="max-w-3xl mx-auto text-center mb-12">
                <h2 class="text-3xl font-bold text-gray-900 mb-4">
                    <?= e($data['lang']['section_title']) ?>
                </h2>
                <p class="text-gray-600 text-lg">
                    <?= e($data['lang']['section_subtitle']) ?>
                </p>
            </div>
        <?php endif; ?>
        
        <!-- 联系信息列表 -->
        <div class="<?= e($data['grid_classes']) ?>">
            <?php foreach ($data['items'] as $item): ?>
                <div class="<?= e($data['card_base_classes']) ?>">
                    <a href="<?= e($item['link']) ?>" class="block">
                        <!-- 图标 -->
                        <div class="<?= e($item['styles']['icon']) ?>">
                            <i class="fa <?= e($item['icon']) ?>"></i>
                        </div>
                        
                        <!-- 标题 -->
                        <h3 class="<?= e($item['styles']['title']) ?>">
                            <?= e($item['title']) ?>
                        </h3>
                        
                        <!-- 内容 -->
                        <div class="<?= e($item['styles']['content']) ?>">
                            <?= e($item['content']) ?>
                        </div>
                        
                        <!-- 描述 -->
                        <p class="<?= e($item['styles']['description']) ?>">
                            <?= e($item['description']) ?>
                        </p>
                    </a>
                </div>
            <?php endforeach; ?>
        </div>
        
        <!-- 地址地图（如果存在地址项） -->
        <?php 
        $addressItem = null;
        foreach ($data['items'] as $item) {
            if ($item['id'] === 'address') {
                $addressItem = $item;
                break;
            }
        }
        
        if ($addressItem): ?>
            <div class="mt-12 rounded-xl overflow-hidden shadow-lg">
                <div id="contact-map" 
                     class="w-full" 
                     style="height: <?= e($addressItem['height'] ?? '400px') ?>; 
                            background: #f1f5f9;"
                     data-lat="<?= e($addressItem['latitude']) ?>"
                     data-lng="<?= e($addressItem['longitude']) ?>"
                     data-zoom="<?= e($addressItem['zoom']) ?>">
                    <!-- 地图将通过JS初始化 -->
                    <div class="w-full h-full flex items-center justify-center text-gray-500">
                        地图加载中...
                    </div>
                </div>
            </div>
        <?php endif; ?>
    </div>
</section>

<!-- 地图初始化脚本 -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    var mapEl = document.getElementById('contact-map');
    if (mapEl) {
        // 这里可以接入实际地图API（如高德、百度、Google Maps）
        // 示例仅为占位，实际项目中需替换为真实地图初始化代码
        setTimeout(function() {
            mapEl.style.background = 'url(https://picsum.photos/id/1031/1200/400) center/cover no-repeat';
            mapEl.innerHTML = '<div class="absolute bottom-4 left-4 bg-white px-4 py-2 rounded-lg shadow-lg">' + 
                             '<?= e($addressItem['content'] ?? '') ?>' + 
                             '</div>';
        }, 800);
    }
});
</script>
    